<template>
  <div class="hello" style="width: 100%">
    <el-row :gutter="20" style="margin: 0">
      <el-col :span="24">
        <div class="top" id="top" style="margin-left: 4%; margin-top: 20px;height: 5vh">
          <span style="font-size: 24px; width: 67%">企业基本信息</span>
          <span class="dw">单位名称:</span>
          <el-dropdown
            trigger="click"
            split-button
            @command="handleCommand"
            class="elb"
          >
            <span class="el-dropdown-link">
              {{ company }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-plus"
                v-for="d in companyList"
                :key="d.code"
                :command="{ name: d.comp_name, ev: d.code }"
              >
                {{ d.comp_name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <hr style="margin: 0px 3% 15px 3%; border: 1px solid rgb(220, 223, 230)"/>
      </el-col>
      <el-col :span="8" style="border-right: 1px solid rgb(220, 223, 230)">
        <div class="bottom bottom1" id="bottom" style="margin-left: 8%;height: 80vh">
          <!-- <h3 style="margin-left: 1%;">上市公司总市值数据</h3> -->
          <el-table
            :data="tableData"
            stripe
            row-class-name="rowh"
            style="overflow: auto"
          >
            <el-table-column
              prop="comp_name"
              label="上市公司名称"
            ></el-table-column>
            <el-table-column prop="ev" label="总市值"> </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          class="bottom"
          id="bottom"
          style="
            padding-right: 12%;
            border-right: 1px solid rgb(220, 223, 230);
            margin-left: -5%;height: 80vh
          "
        >
          <ul class="ulul">
            <li
              class="leftLi"
              style="display: flex; margin: 10px 0;height: 50vh"
              v-for="(o, index) in oneList.LeftData"
              :key="index"
            >
              <img :src="icon(o)" alt="" style="margin-right: 3%" />
              <span style="width: 50%; display: flex; align-items: center">{{
                o.name
              }}</span>
              <span
                style="
                  width: 40%;
                  color: rgb(254, 161, 113);
                  display: flex;
                  align-items: center;
                "
                >{{ o.num }}</span
              >
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="8">
        <div
          class="bottom bottom3"
          id="bottom"
          style="justify-content: flex-start;height: 80vh"
        >
          <ul
            class="ulul"
            style="height: 33%; margin-left: 5%; flex-direction: row"
          >
            <div style="width: 50%">
              <li
                style="display: flex; margin: 10px 0; height: 40px; width: 100%"
                v-for="(o, index) in oneList.MoneyFlow"
                :key="index"
              >
                <img
                  :src="icon(o)"
                  alt=""
                  style="margin-right: 3%; width: 12%"
                />
                <span style="width: 50%; display: flex; align-items: center">{{
                  o.name
                }}</span>
                <span
                  style="
                    width: 50%;
                    color: rgb(254, 161, 113);
                    display: flex;
                    align-items: center;
                  "
                  >{{ o.num }}</span
                >
              </li>
            </div>
            <div style="width: 50%">
              <li
                style="display: flex; margin: 10px 0; height: 40px; width: 100%"
                v-for="(o, index) in oneList.RigthData"
                :key="index"
              >
                <img
                  :src="icon(o)"
                  alt=""
                  style="margin-right: 3%; width: 12%"
                />
                <span style="width: 50%; display: flex; align-items: center">{{
                  o.name
                }}</span>
                <span
                  style="
                    width: 30%;
                    color: rgb(254, 161, 113);
                    display: flex;
                    align-items: center;
                  "
                  >{{ o.num }}元</span
                >
              </li>
            </div>
          </ul>
          <Echarts />
        </div>
      </el-col>
      <el-col :span="24" style="margin-top: 10px;">
        <hr style="margin: 0px 3% 15px 3%; border: 1px solid rgb(220, 223, 230)"/>
      </el-col>
      <el-col :span="24" style="margin-top: 10px;height:50vh">
        <Guben />
      </el-col>
      <el-col :span="24" style="margin-top: 10px;height:50vh">
        <Sdgd />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reqCompanyList } from "@/api/index";
import { reqStock } from "@/api/index";
import Echarts from "@/views/echarts";
import Guben from "@/views/guben";
import Sdgd from "@/views/sdgd";

export default {
  name: "Guquan",
  components: { Echarts,Guben,Sdgd },
  data() {
    return {
      companyList: [
         {
            "ev": 520528.98,
            "code": "001208.SZ",
            "comp_name": "湖南华菱线缆股份有限公司"
        },
        {
            "ev": 366787.08,
            "code": "002297.SZ",
            "comp_name": "湖南博云新材料股份有限公司"
        },
        {
            "ev": 386172.95,
            "code": "000428.SZ",
            "comp_name": "华天酒店集团股份有限公司"
        },
        {
            "ev": 435380.47,
            "code": "000722.SZ",
            "comp_name": "湖南发展集团股份有限公司"
        },
        {
            "ev": 5093854.79,
            "code": "000157.SZ",
            "comp_name": "中联重科股份有限公司"
        },
        {
            "ev": 528829.37,
            "code": "600127.SH",
            "comp_name": "金健米业股份有限公司"
        },
        {
            "ev": 965371.77,
            "code": "600929.SH",
            "comp_name": "雪天盐业集团股份有限公司"
        },
        {
            "ev": 4083001.81,
            "code": "000932.SZ",
            "comp_name": "湖南华菱钢铁股份有限公司"
        },
        {
            "ev": 415154.59,
            "code": "002096.SZ",
            "comp_name": "湖南南岭民用爆破器材股份有限公司"
        },
        {
            "ev": 1210453.75,
            "code": "002155.SZ",
            "comp_name": "湖南黄金股份有限公司"
        },
        {
            "ev": 193415.25,
            "code": "600156.SH",
            "comp_name": "湖南华升股份有限公司"
        },
        {
            "ev": 843682.93,
            "code": "600975.SH",
            "comp_name": "湖南新五丰股份有限公司"
        },
        {
            "ev": 314478.65,
            "code": "600731.SH",
            "comp_name": "湖南海利化工股份有限公司"
        },
        {
            "ev": 1543015.74,
            "code": "600416.SH",
            "comp_name": "湘潭电机股份有限公司"
        },
        {
            "ev": 651148.36,
            "code": "000900.SZ",
            "comp_name": "现代投资股份有限公司"
        }
      ],
      oneList: {
                "TOT_LIAB": "0.0",
                "EQUITY_NEW": "56867851034.55",
                "HIGH": "6.48",
                "code": "000157.SZ",
                "NETPROFIT_TTM": "6269768140.19",
                "SHARE_ISSUING_MKT": "7096027688.0",
                "TOT_CUR_ASSETS": "0.0",
                "CLOSE": "6.29",
                "NET_PROFIT_IS": "0.0",
                "MFD_BUYAMT_D": "0.0",
                "MKT_CAP_ARD": "54584571164.44",
                "MFD_INFLOW_M": "-44753973.0",
                "INVENTORIES": "0.0",
                "MFD_BUYVOL_D": "0.0",
                "EPS_TTM": "0.7224906371983529",
                "TURN": "0.5301338123973904",
                "RigthData": [
                    {
                        "num": "6.48",
                        "icon": "开盘价格.svg",
                        "name": "开盘价格"
                    },
                    {
                        "num": "6.29",
                        "icon": "收盘价格.svg",
                        "name": "收盘价格"
                    },
                    {
                        "num": "6.48",
                        "icon": "昨日最高价.svg",
                        "name": "昨日最高价"
                    },
                    {
                        "num": "6.27",
                        "icon": "昨日最低价.svg",
                        "name": "昨日最低价"
                    }
                ],
                "GR_TTM": "67130626817.29",
                "TOT_ASSETS": "0.0",
                "TOT_CUR_LIAB": "0.0",
                "Finance": [
                    {
                        "num": "0.00万元",
                        "name": "资产总计"
                    },
                    {
                        "num": "0.00万元",
                        "name": "负债合计"
                    },
                    {
                        "num": "0.00万元",
                        "name": "流动资产合计"
                    },
                    {
                        "num": "0.00万元",
                        "name": "流动负债合计"
                    },
                    {
                        "num": "5686785.10万元",
                        "name": "净利润"
                    },
                    {
                        "name": "利润总额"
                    },
                    {
                        "num": "626976.81万元",
                        "name": "归属母公司股东的净利润(TTM)_VAL_PIT"
                    },
                    {
                        "name": "归属母公司股东的净利润(LF)_PIT"
                    },
                    {
                        "num": "6713062.68万元",
                        "name": "营业总收入(TTM)_PIT"
                    },
                    {
                        "num": "0.00万元",
                        "name": "营业总收入(TTM)"
                    }
                ],
                "MoneyFlow": [
                    {
                        "num": "0.00万元",
                        "name": "流入量",
                        "icon" : "流入量.svg"
                    },
                    {
                        "num": "0.00万元",
                        "name": "流入额",
                        "icon" : "流入额.svg"
                    },
                    {
                        "num": "0.00万元",
                        "name": "流出量",
                        "icon" : "流出量.svg"
                    },
                    {
                        "num": "0.00万元",
                        "name": "流出额",
                        "icon" : "流出额.svg"
                    },
                    {
                        "num": "-4455.40万元",
                        "name": "主力净流入额",
                        "icon" : "主力净流入额.svg"
                    }
                ],
                "OPEN": "6.48",
                "GR_TTM2": "0.0",
                "EV": "50851912366.73534",
                "LeftData": [
                    {
                        "num": "5085191.24万元",
                        "icon": "总市值1.svg",
                        "name": "总市值1"
                    },
                    {
                        "num": "5458457.12万元",
                        "icon": "总市值2.svg",
                        "name": "总市值2"
                    },
                    {
                        "num": "0.72",
                        "icon": "每股收益EPS.svg",
                        "name": "每股收益EPS"
                    },
                    {
                        "num": "8.71",
                        "icon": "市盈率PE.svg",
                        "name": "市盈率PE"
                    },
                    {
                        "num": "0.53",
                        "icon": "换手率.svg",
                        "name": "换手率"
                    },
                    {
                        "num": "709602.77万元",
                        "icon": "流通股本.svg",
                        "name": "流通股本"
                    },
                    {
                        "num": "867799.22万元",
                        "icon": "总股本.svg",
                        "name": "总股本"
                    }
                ],
                "COMP_NAME": "中联重科股份有限公司",
                "LOW": "6.27",
                "MFD_SELLAMT_D": "0.0",
                "TOTAL_SHARES": "8677992236.0",
                "MFD_SELLVOL_D": "0.0",
                "TOT_PROFIT": "0.0",
                "PE_TTM": "8.705995559692383"
            },
      threeList: [
        { icon: "stock_01.svg", name: "开盘价格", price: "7.95" },
        { icon: "stock_02.svg", name: "收盘价格", price: "7.8" },
        { icon: "stock_03.svg", name: "昨日最高价", price: "7.97" },
        { icon: "stock_04.svg", name: "昨日最低价", price: "7.78" },
      ],
      tableData: [
         {
            "ev": 520528.98,
            "code": "001208.SZ",
            "comp_name": "湖南华菱线缆股份有限公司"
        },
        {
            "ev": 366787.08,
            "code": "002297.SZ",
            "comp_name": "湖南博云新材料股份有限公司"
        },
        {
            "ev": 386172.95,
            "code": "000428.SZ",
            "comp_name": "华天酒店集团股份有限公司"
        },
        {
            "ev": 435380.47,
            "code": "000722.SZ",
            "comp_name": "湖南发展集团股份有限公司"
        },
        {
            "ev": 5093854.79,
            "code": "000157.SZ",
            "comp_name": "中联重科股份有限公司"
        },
        {
            "ev": 528829.37,
            "code": "600127.SH",
            "comp_name": "金健米业股份有限公司"
        },
        {
            "ev": 965371.77,
            "code": "600929.SH",
            "comp_name": "雪天盐业集团股份有限公司"
        },
        {
            "ev": 4083001.81,
            "code": "000932.SZ",
            "comp_name": "湖南华菱钢铁股份有限公司"
        },
        {
            "ev": 415154.59,
            "code": "002096.SZ",
            "comp_name": "湖南南岭民用爆破器材股份有限公司"
        },
        {
            "ev": 1210453.75,
            "code": "002155.SZ",
            "comp_name": "湖南黄金股份有限公司"
        },
        {
            "ev": 193415.25,
            "code": "600156.SH",
            "comp_name": "湖南华升股份有限公司"
        },
        {
            "ev": 843682.93,
            "code": "600975.SH",
            "comp_name": "湖南新五丰股份有限公司"
        },
        {
            "ev": 314478.65,
            "code": "600731.SH",
            "comp_name": "湖南海利化工股份有限公司"
        },
        {
            "ev": 1543015.74,
            "code": "600416.SH",
            "comp_name": "湘潭电机股份有限公司"
        },
        {
            "ev": 651148.36,
            "code": "000900.SZ",
            "comp_name": "现代投资股份有限公司"
        }
      ],
      company: "雪天盐业集团股份有限公司",
      date: "20220418",
      codes: { codes: "600929.SH" },
      obj: {}, //echarts的data处理
      echartsHeight: "",
    };
  },
  mounted() {
    this.getCompanyList();
    this.getStock(this.codes);
  },
  methods: {
    change() {
      console.log(123);
    },
    handleCommand(command) {
      this.company = command.name;
      console.log(command);
      this.getStock({ codes: command.ev });
    },
    icon(data) {
      return require("@/assets/images/" + data.icon);
    },
    //日期格式函数
    YYY(date) {
      let month =
        parseInt(date.getMonth()) + 1 < 10
          ? "0" + (parseInt(date.getMonth()) + 1).toString()
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return date.getFullYear() + month + day;
    },
    //获取companyList
    async getCompanyList() {
      let result = await reqCompanyList(this.date);
      if (result.Code === 1) {
        result.Content.forEach((i) => {
          i.ev = i.ev + "万元";
        });
        console.log(result.Content);
        this.tableData = result.Content;
        this.companyList = result.Content;
      } else {
        return Promise.reject(new Error("faile"));
      }
    },
    //获取stock
    async getStock(codes) {
      let result = await reqStock(codes);
      if (result.Code == 1) {
        this.oneList = result.Content[this.YYY(new Date())][0];
        this.obj = result.Content;
      } else {
        return Promise.reject(new Error("faile"));
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.top {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 20px 0;
  .dw {
    width: 7%;
    height: 40px;
    line-height: 40px;
  }
  .elb {
    width: 26%;
  }
  .el-dropdown-link {
    float: left;
  }
}
.bottom {
  display: flex;
  justify-content: center;
  // height: 800px;
  .ulul {
    width: 88%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.bottom1 {
  flex-direction: column;
  .rowh {
    height: 20px;
  }
  .has-gutter {
    font-size: 19px;
    color: black;
    font-weight: 500;
  }
}
.bottom3 {
  flex-direction: column;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(210, 210, 210, 0.5);
}
</style>
<style>
.el-button-group {
  width: 90%;
}
.el-button--default:first-child {
  width: 90%;
  float: left !important;
}
.el-button--default:last-child {
  float: left !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px !important;
}
/* .el-table thead {
    font-size: 19px;
    color: black;
    font-weight: 500;
} */
</style>